<template>
  <div>
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    <div id="myEcharts"></div>
    <div id="siChuan"></div>
  </div>
</template>

<script>
import "../assets/china.js";
import "../assets/sichuan.js";
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    this.drawLine();
    this.drawMap();
    this.drawSichuan();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },
    drawMap() {
      let myEcharts = this.$echarts.init(document.getElementById("myEcharts"));
      myEcharts.setOption({
        title: {
          text: "销量分布图",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["销量分布图"]
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            {
              min: 1000,
              max: 1000000,
              label: "大于等于1000人",
              color: "#4169E1"
            },
            { min: 500, max: 999, label: "数量500-999个", color: "#00FFFF" },
            { min: 100, max: 499, label: "数量100-499个", color: "#20B2AA" },
            { min: 10, max: 99, label: "数量10-99个", color: "#228B22" },
            { min: 1, max: 9, label: "数量1-9个", color: "#2F4F4F" }
          ],
          color: ["#x7nd", "#E09107", "#A3E00B"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        roamController: {
          show: true,
          left: "right",
          mapTypeControl: {
            china: true
          }
        },
        series: [
          {
            name: "在租数",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              show: true,
              color: "rgb(249, 249, 249)"
            },
            data: [
              {
                name: "北京",
                value: 212
              },
              {
                name: "天津",
                value: 60
              },
              {
                name: "上海",
                value: 208
              },
              {
                name: "重庆",
                value: 337
              },
              {
                name: "河北",
                value: 126
              },
              {
                name: "河南",
                value: 675
              },
              {
                name: "云南",
                value: 117
              },
              {
                name: "辽宁",
                value: 74
              },
              {
                name: "黑龙江",
                value: 155
              },
              {
                name: "湖南",
                value: 593
              },
              {
                name: "安徽",
                value: 480
              },
              {
                name: "山东",
                value: 270
              },
              {
                name: "新疆",
                value: 29
              },
              {
                name: "江苏",
                value: 308
              },
              {
                name: "浙江",
                value: 829
              },
              {
                name: "江西",
                value: 476
              },
              {
                name: "湖北",
                value: 13522
              },
              {
                name: "广西",
                value: 139
              },
              {
                name: "甘肃",
                value: 55
              },
              {
                name: "山西",
                value: 74
              },
              {
                name: "内蒙古",
                value: 34
              },
              {
                name: "陕西",
                value: 142
              },
              {
                name: "吉林",
                value: 42
              },
              {
                name: "福建",
                value: 179
              },
              {
                name: "贵州",
                value: 56
              },
              {
                name: "广东",
                value: 797
              },
              {
                name: "青海",
                value: 15
              },
              {
                name: "西藏",
                value: 1
              },
              {
                name: "四川",
                value: 282
              },
              {
                name: "宁夏",
                value: 34
              },
              {
                name: "海南",
                value: 79
              },
              {
                name: "台湾",
                value: 10
              },
              {
                name: "香港",
                value: 15
              },
              {
                name: "澳门",
                value: 9
              }
            ]
          }
        ]
      });
    },
    drawSichuan() {
      let siChuan = this.$echarts.init(document.getElementById("siChuan"));
      siChuan.setOption({
        title: {
          text: "销量分布图",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["销量分布图"]
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            {
              min: 1000,
              max: 1000000,
              label: "大于等于1000人",
              color: "#4169E1"
            },
            { min: 500, max: 999, label: "数量500-999个", color: "#00FFFF" },
            { min: 100, max: 499, label: "数量100-499个", color: "#20B2AA" },
            { min: 10, max: 99, label: "数量10-99个", color: "#228B22" },
            { min: 1, max: 9, label: "数量1-9个", color: "#2F4F4F" }
          ],
          color: ["#x7nd", "#E09107", "#A3E00B"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        roamController: {
          show: true,
          left: "right",
          mapTypeControl: {
            china: true
          }
        },
        series: [
          {
            name: "在租数",
            type: "map",
            mapType: "四川",
            roam: false,
            label: {
              show: true,
              color: "rgb(249, 249, 249)"
            },
            data: [
              {
                name: "成都市",
                value: 1050
              },
              {
                name: "绵阳市",
                value: 950
              },
              {
                name: "泸州市",
                value: 850
              },
              {
                name: "自贡市",
                value: 337
              },
              {
                name: "攀枝花市",
                value: 355
              },
              {
                name: "达州市",
                value: 105
              },
               {
                name: "乐山市",
                value: 95
              },
               {
                name: "德阳市",
                value: 675
              },
               {
                name: "雅安市",
                value: 675
              },
              {
                name: "眉山市",
                value: 675
              },
              {
                name: "内江市",
                value: 675
              },
              {
                name: "宜宾市",
                value: 675
              },
              {
                name: "资阳市",
                value: 675
              },
              {
                name: "遂宁市",
                value: 675
              },
              {
                name: "南充市",
                value: 675
              },
              {
                name: "巴中市",
                value: 155
              },
              {
                name: "广元市",
                value: 255
              },
              {
                name: "广安市",
                value: 12
              },
              {
                name: "阿坝藏族羌族自治州",
                value: 13
              },
              {
                name: "甘孜藏族自治州",
                value: 25
              },
              {
                name: "凉山彝族自治州",
                value: 35
              },
            ]
          }
        ]
      });
    }

  }
};
</script>

<style>
#myEcharts {
  width: 800px;
  height: 500px;
  border: solid 1px red;
  margin: 0 auto;
}
#siChuan {
  width: 800px;
  height: 500px;
  border: solid 1px red;
  margin: 0 auto;
}
</style>